<!-- 余额 -->
<template>
  <view>
    <aster-back font-color="#333" :show-title="true" title="余额" />
    <view class="balance">
      <view class="balance__top">
        <view class="balance__top__title"> 我的余额 </view>
        <view class="balance__top__content">
          <view class="balance__top__content__position">
            <view class="balance__top__content__circle">
              <view class="balance__top__content__circle__left ab" :style="leftStyle" />
              <view class="balance__top__content__circle__right ab" :style="rightStyle" />
            </view>
            <view class="balance__top__content__inner">
              <view class="balance__top__content__inner__wrapper">
                <view class="balance__top__content__inner__wrapper__value">
                  <text style="font-size: 14px">￥</text>{{ balance }}
                </view>
                <view class="balance__top__content__inner__wrapper__label"> 总余额 </view>
              </view>
            </view>
          </view>
        </view>
        <view class="balance__top__btn">
          <button @click="to_withdrawal()">立即提现</button>
        </view>
      </view>
      <view class="balance__center">
        <view class="balance__center__left">
          <view class="balance__center__left__top">
            已提现:
            <view class="balance__center__price">
              <text style="font-size: 14px">￥</text>{{ withdrawal }}
            </view>
          </view>
          <view class="balance__center__left__bottom">
            <icon class="iconfont icon-tixian" type="" />
            <view class="balance__center__text">提现记录</view>
          </view>
        </view>
        <view class="balance__center__right">
          <view class="balance__center__right__top">
            <icon class="iconfont icon-xiaofeijiangli" type="" />
            <view class="balance__center__text">消费记录</view>
          </view>
          <view class="balance__center__right__bottom">
            <icon class="iconfont icon-chongzhi" type="" />
            <view class="balance__center__text">充值记录</view>
          </view>
        </view>
      </view>
      <view class="balance__bottom">
        <view class="balance__bottom__title">余额充值</view>
        <view class="balance__bottom__content">
          <view class="balance__bottom__content__top">
            <view
              :class="
                isActive == 50
                  ? 'balance__bottom__price balance__bottom__active'
                  : 'balance__bottom__price'
              "
              @click="isActive = 50"
            >
              <view class="balance__bottom__price__label">50</view>
              <view class="balance__bottom__price__value">到账￥50</view>
            </view>
            <view
              :class="
                isActive == 100
                  ? 'balance__bottom__price balance__bottom__active'
                  : 'balance__bottom__price'
              "
              @click="isActive = 100"
            >
              <view class="balance__bottom__price__label">100</view>
              <view class="balance__bottom__price__value">到账￥100</view>
            </view>
            <view
              :class="
                isActive == 500
                  ? 'balance__bottom__price balance__bottom__active'
                  : 'balance__bottom__price'
              "
              @click="isActive = 500"
            >
              <view class="balance__bottom__price__label">500</view>
              <view class="balance__bottom__price__value">到账￥500</view>
            </view>
          </view>
          <view class="balance__bottom__content__center">
            <uni-easyinput ref="moneyRef" type="number" placeholder="请输入其他金额" />
          </view>
          <view class="balance__bottom__content__bottom">
            <button @click="to_recharge()"> 马上充值 </button>
            <view class="balance__bottom__content__bottom__tip">
              <checkbox
                :checked="checkedAgreement"
                color="#ff696b"
                @click="checkedAgreement = !checkedAgreement"
              />
              <view>钱包服务协议</view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <aster-popup :show="showPopup" bgColor="#fff" mode="center" round="20rpx" @close="closePopup()">
      <view class="popup">
        <uni-easyinput :value="withdrawalNum" type="number" placeholder="请输入其他金额" />
      </view>
    </aster-popup>
  </view>
</template>
<script setup lang="ts">
  import AsterBack from '@/components/common/aster-back.vue';
  import AsterPopup from '@/components/common/aster-popup.vue';
  import { onMounted, ref } from 'vue';
  import { Toast } from '@/utils/uniapi/prompt';
  import { onLoad } from '@dcloudio/uni-app';
  import { getBalance } from '@/services/api/wallet/wallet';
  import { ResultEnum } from '@/enums/httpEnum';

  const leftStyle = ref();
  const rightStyle = ref();

  const balance = ref(0);
  const withdrawal = ref(0);
  const isActive = ref(50);
  const checkedAgreement = ref(false);
  const moneyRef = ref();

  const showPopup = ref(false);
  const withdrawalNum = ref(0);

  /**
   * 提现
   */
  const to_withdrawal = () => {};

  /**
   * 充值
   */
  const to_recharge = () => {
    console.log(moneyRef.value);
    console.log(isActive.value);
    if (!checkedAgreement.value) {
      Toast('请勾选同意钱包服务协议');
      return;
    }
    if (moneyRef.value.isVal && moneyRef.value.val <= 0) {
      Toast('充值金额必须大于0');
      return;
    }
    let money = moneyRef.value.isVal ? moneyRef.value.val : isActive.value;

    balance.value = balance.value + Number(money);
    Toast('充值成功,到账' + money + '元');
  };

  onLoad(() => {
    loadData();
  });

  onMounted(() => {
    initCircle();
  });

  const loadData = () => {
    getBalance().then(({ data }) => {
      if (data.code == ResultEnum.SUCCESS) {
        balance.value = Number(data.data.balance);
        withdrawal.value = Number(data.data.withdrawal);
      }
    });
  };

  let timer = 0;
  let percent = 0;
  const initCircle = () => {
    percent += 1;

    if (percent < 50) {
      rightStyle.value = {
        transform: 'rotate(' + 3.6 * percent + 'deg)',
      };
    } else {
      rightStyle.value = {
        transform: 'rotate(0)',
        borderColor: '#ff696b',
      };
      leftStyle.value = {
        transform: 'rotate(' + 3.6 * (percent - 50) + 'deg)',
      };
    }
    if (percent < 100) {
      window.clearTimeout(timer);
      timer = window.setTimeout(initCircle, 20);
    }
  };

  const closePopup = () => {
    showPopup.value = false;
  };
</script>
<style lang="scss">
  page {
    padding: 0 20rpx;
  }

  .balance {
    &__top {
      border-radius: 20rpx;
      padding: 20rpx;
      background-color: #fff;

      &__title {
        font-weight: bold;
      }

      &__content {
        padding: 20rpx 0;
        display: flex;
        justify-content: center;
        align-items: center;

        &__position {
          position: relative;
        }
        &__circle {
          width: 280rpx;
          height: 280rpx;
          position: relative;
          border-radius: 50%;
          box-shadow: inset 0 0 0 5px #ff696b;

          &__left {
            border: 5px solid #ffbc49;
            border-radius: 50%;
            clip: rect(0, 140rpx, 280rpx, 0);
          }

          &__right {
            border: 5px solid #ffbc49;
            border-radius: 50%;
            clip: rect(0, 280rpx, 280rpx, 140rpx);
          }

          .ab {
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
          }
        }

        &__inner {
          position: absolute;
          top: 50%;
          left: 50%;
          -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
          color: #fff;

          &__wrapper {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;

            &__value {
              color: #333;
              font-size: 50rpx;
              font-weight: 580;
              line-height: 1;
            }

            &__label {
              color: #bbb;
              font-size: 24rpx;
              padding-top: 10rpx;
            }
          }
        }
      }

      &__btn {
        margin: 0 30rpx;

        button {
          border: 1px solid rgb(255, 106, 108);
          color: rgb(255, 106, 108);
          background: rgb(254, 240, 239);
          width: 70vw;
          font-size: 28rpx;
        }
      }
    }

    &__center {
      border-radius: 20rpx;
      margin-top: 30rpx;

      display: flex;
      justify-content: space-between;
      align-items: stretch;

      &__price {
        color: #ff696b;
        font-size: 36rpx;
      }

      &__text {
        font-size: 32rpx;
        font-weight: bold;
        padding-left: 20rpx;
        color: #333;
      }

      &__left {
        width: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        border-radius: 20rpx;
        padding: 30rpx 40rpx;
        background-color: #fff;

        &__top {
          font-size: 24rpx;
          color: #bbb;
          margin: 10rpx 0;
          display: flex;
          justify-content: center;
          align-items: center;
        }

        &__bottom {
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: row;
          margin: 10rpx 0;

          icon {
            font-size: 60rpx;
            color: #6f96f1;
          }
        }
      }

      &__right {
        width: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        margin-left: 20rpx;

        &__top {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 100%;
          height: 50%;
          background-color: #fff;
          margin-bottom: 10rpx;
          padding: 20rpx 0;
          border-radius: 20rpx;

          icon {
            font-size: 60rpx;
            color: #ff696b;
          }
        }

        &__bottom {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 100%;
          height: 50%;
          background-color: #fff;
          margin-top: 10rpx;
          padding: 20rpx 0;
          border-radius: 20rpx;

          icon {
            font-size: 60rpx;
            color: #ffbc49;
          }
        }
      }
    }

    &__bottom {
      border-radius: 20rpx;
      margin: 30rpx 0;
      background-color: #fff;
      padding: 20rpx;

      &__price {
        background-color: #f5f5f5;
        border-radius: 20rpx;
        height: 150rpx;
        color: #333;
        width: 30%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;

        &__label {
          font-size: 36rpx;
          line-height: 1;
          font-weight: 580;
        }

        &__value {
          font-size: 24rpx;
        }
      }

      &__active {
        background-color: #ff696b;
        color: #fff;
      }

      &__title {
        font-weight: bold;
      }

      &__content {
        margin: 20rpx 0;
        padding: 0 20rpx;

        &__top {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin: 20rpx 0;
        }

        &__center {
          margin: 20rpx 0;
        }

        &__bottom {
          button {
            border: 1px solid rgb(255, 106, 108);
            color: rgb(255, 106, 108);
            background: rgb(254, 240, 239);
            font-size: 28rpx;
          }

          &__tip {
            display: flex;
            justify-content: center;
            align-items: center;
            padding-top: 20rpx;

            font-size: 24rpx;
            color: #bbb;

            ::v-deep .uni-checkbox-input {
              margin-right: 20rpx;
              border-radius: 50%;
              width: 30rpx;
              height: 30rpx;
            }
          }
        }
      }
    }
  }
</style>
